<template>
  <ElCard class="card art-custom-card summary-card" shadow="never">
    <template #header>
      <div class="card-header">
        <span class="title">内存</span>
        <span class="subtitle">使用概览</span>
      </div>
    </template>

    <ElDescriptions :column="4" border>
      <ElDescriptionsItem label="总量">{{ data?.total || '-' }}</ElDescriptionsItem>
      <ElDescriptionsItem label="已使用">{{ data?.used || '-' }}</ElDescriptionsItem>
      <!-- <ElDescriptionsItem label="空闲">{{ data?.free || '-' }}</ElDescriptionsItem> -->
      <ElDescriptionsItem label="使用率"><span class="accent">{{ `${toPercent(data?.usage)}%` }}</span>
      </ElDescriptionsItem>
    </ElDescriptions>

    <div class="progress-wrap">
      <ElProgress :percentage="toPercent(data?.usage)" :stroke-width="14" :text-inside="true" status="success" />
    </div>
  </ElCard>
</template>

<script setup lang="ts">
import type { ServerMonitorModel } from '@/api/system/server'

const props = defineProps<{ data: ServerMonitorModel['mem'] | null | undefined }>()

const toPercent = (val?: number | string | null) => {
  if (val === undefined || val === null) return 0
  const n = Number(val)
  return n > 100 ? 100 : n < 0 ? 0 : Number(n.toFixed(1))
}
</script>

<style scoped>
.card-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.card-header .title {
  font-weight: 600;
}

.card-header .subtitle {
  color: var(--el-text-color-secondary);
  font-size: 12px;
}

.progress-wrap {
  margin-top: 12px;
}

.accent {
  color: var(--el-color-warning);
  font-weight: 600;
}

.summary-card {
  min-height: 180px;
}
</style>